import { useRef } from 'react';

import { useRequest } from 'ahooks';
import { Button, Popconfirm, Table, Tag } from 'antd';

import Text from '@/components/text';

import { store } from '@/store';

import { usePermission } from '@/auth';
import { NumBool } from '@/enum';
import { FeAuthStatusObj, FeAuthTypeObj } from '@/enum/auth';
import {
  permissionFrontDelete,
  permissionFrontTree
} from '@/services/base/quanxianmokuaiqianduanyemianquanxianguanli';

import Edit, { EditRef } from './edit';
import GenJson, { GenJsonRef } from './gen-json';
import styles from './index.module.scss';

/** 该模块增删改查对象 */
export type BizObject = BASE.PagePermissionVO;

const Page: React.FC = () => {
  const permission = usePermission();
  const edit = useRef<EditRef>(null);
  const gen = useRef<GenJsonRef>(null);
  const table = useRequest(async () => {
    const res = await permissionFrontTree({
      queryApi: NumBool.是
    });

    const list = res.data || [];

    return list;
  });

  return (
    <>
      <>
        <div className={styles['action']}>
          <Button
            type="primary"
            onClick={() => {
              edit.current?.open({
                type: 'add',
                onSuccess: () => {
                  table.refresh();
                }
              });
            }}
          >
            新增
          </Button>
          {permission.check() && (
            <Button
              onClick={() => {
                gen.current?.open({
                  onSuccess: () => {
                    table.refresh();
                  }
                });
              }}
              type="primary"
            >
              生成权限
            </Button>
          )}
        </div>

        <Table
          size="small"
          rowKey="id"
          bordered
          expandable={{
            childrenColumnName: 'child'
          }}
          style={{
            background: 'transparent'
          }}
          columns={[
            {
              title: '权限名称',
              dataIndex: 'permissionName'
            },
            {
              title: '权限编码',
              dataIndex: 'permissionCode'
            },
            {
              title: '权限类型',
              dataIndex: 'type',
              render: (v) => {
                const obj = FeAuthTypeObj.get(v);

                if (obj) {
                  return <Tag color={obj.color}>{obj.text}</Tag>;
                }

                return emptyText;
              }
            },
            {
              title: '状态',
              dataIndex: 'status',
              render: (v) => {
                const obj = FeAuthStatusObj.get(v);

                if (obj) {
                  return <Tag color={obj.color}>{obj.text}</Tag>;
                }

                return emptyText;
              }
            },
            {
              title: '绑定的接口',
              dataIndex: 'apiList',
              width: 400,
              render: (_, row) => {
                return (
                  <div>
                    {row.apiList?.map((api) => {
                      return <Tag key={api.apiCode}>{api.permissionName}</Tag>;
                    })}
                  </div>
                );
              }
            },
            {
              title: '操作',
              fixed: 'right',
              align: 'center',
              render: (_, row) => {
                return (
                  <Text.Space>
                    {permission.check() && (
                      <Text
                        onClick={() => {
                          edit.current?.open({
                            type: 'edit',
                            rowData: row,
                            onSuccess: () => {
                              table.refresh();
                            }
                          });
                        }}
                        type="primary"
                      >
                        编辑
                      </Text>
                    )}

                    {permission.check() && (
                      <Popconfirm
                        title={`确定删除该数据吗？`}
                        onConfirm={async () => {
                          const res = await permissionFrontDelete({
                            id: row.id as unknown as string
                          });

                          store.app?.message.success(res.message);
                          table.refresh();

                          return res.success;
                        }}
                      >
                        <Text type="danger">删除</Text>
                      </Popconfirm>
                    )}
                  </Text.Space>
                );
              }
            }
          ]}
          dataSource={table.data}
          pagination={false}
        />
      </>

      <GenJson ref={gen} />
      <Edit ref={edit} feAuthTreeData={table.data || []} />
    </>
  );
};

export default Page;
